<template>
    <view class="bg-content">
        <scroll-view scroll-x="true">
            <div class="table table-bordered" style="background-color: white; text-align: center; width: 900px; overflow: auto;">
                <div class="tr">
                    <div class="td text-center bold" style="width: 100px;">
                        <div style="width: 100px;">推荐店铺</div>
                    </div>
                    <div class="td text-center bold" style="width: 200px;">店铺名称</div>
                    <div class="td text-center bold" style="width: 200px;">开始时间</div>
                    <div class="td text-center bold" style="width: 200px;">结束时间</div>
                    <div class="td text-center bold" style="width: 100px;">状态</div>
                    <div class="td text-center bold" style="width: 100px;">显示顺序</div>
                </div>

                <div class="tr" v-for="(item, index) in tbStoreRecommendList" :key="item.id">
                    <div class="td" style="width: 100px;" @click="navigateTo(`/pages/common/store/index?storeId=${item.storeId}`)">
                        <image style="height: 100px; width: 100px; padding-top: 4px;"
                               :src="item.thumbnailUrl ? item.thumbnailUrl + '?imageView2/1/w/300/h/300' : '/static/default-image/store-brand.jpg'"
                               mode="aspectFill"></image>
                    </div>
                    <div class="td" style="width: 200px;" @click="navigateTo(`/pages/common/store/index?storeId=${item.storeId}`)">
                        {{item.storeName | toEmptyStr}}
                    </div>
                    <div class="td" style="width: 200px;">{{item.startTime}}</div>
                    <div class="td" style="width: 200px;">{{item.endTime}}</div>
                    <div class="td" style="width: 100px;">{{item.statusText}}</div>
                    <div class="td" style="width: 100px;">{{item.displayOrder}}</div>
                </div>
            </div>
        </scroll-view>

        <div style="padding-top: 50px;" v-if="!tbStoreRecommendList.length">
            <u-empty text="数据为空" mode="data"></u-empty>
        </div>
    </view>
</template>

<script>

    import myImg from '@/components/my-img'
    import {TbStoreRecommendService} from "../../../dev/services/tb-store-recommend.service";

    export default {
        props: ["fkId"],
        data() {
            return {
                tbStoreRecommendList: []
            }
        },
        components: {
            myImg,
        },
        mounted() {
            const _self = this;
            _self.findTbStoreRecommendList();
        },
        methods: {
            findTbStoreRecommendList() {
                const _self = this;
                new TbStoreRecommendService().findTbStoreRecommendListCascade({
                    fkId: _self.fkId,
                    orderBy: 'display_order asc'
                }).then(result => {
                    _self.tbStoreRecommendList = [];
                    _self.$nextTick(() => {
                        _self.tbStoreRecommendList = result;
                    });
                    _self.$forceUpdate();
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>
